<template>
  <div class="feedback">
    <van-nav-bar
      title="反馈/意见"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />

    <div class="body">
      <div class="input">
        <el-input
          type="textarea"
          placeholder="请输入你的意见和反馈"
          v-model="textarea"
          maxlength="200"
          show-word-limit
          :autosize="{ minRows: 6, maxRows: 10 }"
        >
        </el-input>
      </div>
      <van-uploader v-model="fileList" multiple :max-count="3" />
      <van-button
        type="primary"
        :disabled="textarea.length <= 0"
        @click="upload"
        block
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant"
import OSS from "ali-oss"
export default {
  data() {
    return {
      text: "",
      textarea: "",
      fileList: [],
      readflag: false, //是否读取完成
      image_urls: [],
    }
  },

  methods: {
    onClickLeft() {
      this.$router.push("/my")
    },
    upload() {
      console.log(this.fileList)
      // let fromData = new FormData()
      // this.fileList.map((item) => {
      //   fromData.append("files", item.file)
      // })
      let files = this.fileList
      let self = this
      let client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: "oss-cn-chengdu",
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        accessKeyId: "LTAI5tHCZfeVG9u9148M1csc",
        accessKeySecret: "vLPa7tCkDqAULsBpymLzqrdNAaCmFO",
        bucket: "liulin",
        secure: true, //开启https
      })

      async function uploadImage() {
        try {
          for (let i = 0; i < files.length; i++) {
            self.fileList[i].status = "uploading"
            self.fileList[i].message = "上传中"
            let name = files[i].file.name
            let index = name.lastIndexOf(".")
            let ext = name.substr(index + 1)
            const result = await client.put(
              "feedback/" + new Date().getTime() + i + "." + ext,
              files[i].file
            )
            //返回的图片路径
            self.image_urls[i] = result.url
            self.fileList[i].status = "success"
            self.fileList[i].message = "上传成功"
          }
          console.log(self.image_urls)
          if (self.image_urls.length > 0) {
            //上传到服务器
            const params = {
              content: self.textarea,
              imgs: JSON.stringify(self.image_urls),
              location: self.userlocal,
            }
            // self.$http.post("/publishMsg", params).then((sdata) => {
            //   Toast.clear()
            //   if (sdata.data.code == 200) {
            //     Toast("发布成功！")
            //     //发布成功
            //     self.$router.replace("/index")
            //   } else {
            //     Toast("发布失败，稍后重试！")
            //   }
            // })

            self.$api.my.feedBack(params).then((res) => {
              console.log(res)
              if ((res.code = 200)) {
                Toast("提交成功")
              }
            })
          }
        } catch (e) {
          Toast("图片上传失败！")
          self.fileList[i].status = "failed"
          self.fileList[i].message = "上传失败"
        }
      }
      // 调用上传
      if (files.length > 0) uploadImage()
    },

    // this.$api.my.feedBack({ id: 1 }).then((res) => {
    //   console.log(res)
    // })

    afterRead(file) {
      console.log(file)
      if (this.fileList.length > 6) {
        Toast("最多选择6张图片")
        return
      }
      this.readflag = true
    },
  },

  watch: {},
}
</script>

<style lang="less" scoped>
.body {
  padding: 10px;
  .input {
    margin-top: 20px;
  }
}
</style>
